<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    form: {
      type: Object,
      redirect: true
    },
    rules: Object,
    align: String
  },
  data() {
    return {
      gForm: [],
      cloneRules: this.rules
    }
  },
  created() {
    this.$on('addForm', item => {
      if (item) {
        this.gForm.push(item)
      }
    })
    this.$on('removeForm', item => {
      if (item.prop) {
        this.gForm.splice(this.gForm.indexOf(item), 1)
      }
    })
  },
  methods: {
    verification(callback) {
      if (!this.gForm.length && callback) {
        let _true = true;
        callback(_true)
        return
      }
      let invalidFields = []
      let valid = true
      this.gForm.forEach(async (item, index) => {
        let re = await item.validate()
        if (!re) {
          valid = false
          invalidFields.push(item.prop)
        }
        if (index === this.gForm.length - 1) {
          callback(valid, invalidFields)
        }
      })
    },

    validateField(prop) {
      let formItem = this.gForm.filter(item => item.prop === prop)[0]
      formItem.validate(this.form[prop])
    }
  }
}
</script>

<style lang="less">
</style>
